<template>
  <div>
    <!-- 卡片视图 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="addRoleDialogForm()"
            >添加角色</el-button
          >
        </el-col>
      </el-row>
      <br />
      <el-table :data="rolesList">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="remarks"></el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isEnable"
              @change="enablechange(scope.$index, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <!-- eslint-disable-next-line vue/no-unused-vars -->
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="EditRoleDialogForm(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加用户角色对话框 -->
    <el-dialog
      title="添加角色"
      :visible.sync="addUserDialogVisible"
      width="50%"
    >
      <el-form
        ref="addRoleForm"
        :model="addRoleForm"
        :rules="addRoleFormRules"
        label-width="100px"
      >
        <el-form-item label="角色名称:" prop="roleName">
          <el-input v-model="addRoleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述:" prop="roleDesc">
          <el-input v-model="addRoleForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="addRole('addRoleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRole, enbaleRole, addRole, editRole } from "../../api/type";

export default {
  data() {
    return {
      // 所有角色列表数据
      rolesList: [],
      defKeys: [],
      // 添加用户角色对话框显示与隐藏
      addUserDialogVisible: false,
      // 添加用户角色验证规则
      addRoleFormRules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
      },
      addRoleForm: {
        id: 0,
        roleName: "",
        remarks: " ",
        isEnable: true,
      },
      newIndex: 0,
    };
  },
  created() {
    this.getRolesList();
  },
  methods: {
    getRolesList() {
      getRole().then(({ data }) => {
        this.rolesList = data.data;
      });
    },
    // 添加用户角色按钮
    addRoleDialogForm() {
      this.addUserDialogVisible = true;
      this.addRoleForm = {};
    },
    // 编辑用户角色按钮
    EditRoleDialogForm(index, row) {
      this.addUserDialogVisible = true;
      this.addRoleForm.roleName = row.roleName;
      this.addRoleForm.remarks = row.remarks;
      this.newIndex = index;
    },
    // 提交用户角色
    addRole(formName) {
      // 添加
      if (this.addRoleForm.id == undefined) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addRole(this.addRoleForm).then(({ data }) => {
              this.rolesList.push(data.data);
              this.addUserDialogVisible = false;
            });
          }
        });
      } else {
        // 编辑
        this.$refs[formName].validate((valid) => {
          if (valid) {
            editRole(this.addRoleForm.id, this.addRoleForm).then(({ data }) => {
              this.rolesList.splice(this.newIndex, data.data);
              this.addUserDialogVisible = false;
            });
          }
        });
      }
    },
    // 是否启用角色
    enablechange(index, row) {
      this.addRoleForm.isEnable = row.isEnable;
      enbaleRole(row.id, this.addRoleForm).then(({ data }) => {
        this.rolesList.splice(index, data.data);
      });
    },
    cancle() {
      this.addUserDialogVisible = false;
    },
  },
};
</script>
<style  scoped>
.el-tag {
  margin: 7px;
}
.bdtop {
  border-top: 1px solid #eee;
}
.bdbottom {
  border-bottom: 1px solid #eee;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>
